<template>
  <div class="riskPoint">
    <div class="tabr-nav-title">
      <van-nav-bar
        title="点位详情"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <van-tabs v-model:active="active" @click-tab="changeTab">
        <van-tab
          :title="item.title"
          :name="item.title"
          v-for="(item, index) in state.tabs"
          :key="index"
        ></van-tab>
      </van-tabs>
      <div class="components">
        <component :is="getComponent(state.active)" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import basicInfo from "./basicInfo.vue";
import perceptionInfo from "./perceptionInfo.vue";
import videoInfo from "./videoInfo.vue";
const router = useRouter();
const state = reactive({
  tabs: [
    {
      title: "基本信息",
      type: "basic",
    },
    {
      title: "物联感知信息",
      type: "perception",
    },
    {
      title: "视频信息",
      type: "video",
    },
    {
      title: "预案信息",
      type: "plan",
    },
    {
      title: "工程整治信息",
      type: "project",
    },
    {
      title: "内涝风险预警事件",
      type: "risk",
    },
    {
      title: "积水告警事件",
      type: "water",
    },
    {
      title: "降雨记录",
      type: "rainfall",
    },
  ],
  active: "基本信息",
});
const onClickLeft = () => history.back();
const getComponent = (key) => {
  switch (key) {
    case "基本信息":
      return basicInfo;
    case "物联感知信息":
      return perceptionInfo;
      case "视频信息":
      return videoInfo;
    default:
      return basicInfo;
  }
};
const changeTab = (val) => {
  state.active = val.name;
};
</script>

<style scoped lang="less">
.riskPoint {
  height: 100vh;
  background: #f7f8f7;

  .tabr-nav-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    height: 44px;
    font-size: 18px;
    color: #29292c;
    text-align: center;
    font-style: normal;
    background: #fff;
    width: 100vw;
  }
  .content {
    margin-top: 10px;
    background: #f7f8f7;
    width: 100vw;
    height: calc(100% - 55px);
    .components {
      padding: 5px;
      box-sizing: border-box;
      margin-top: 10px;
      background: #fff;
      height: calc(100% - 55px);
    }
  }
}
</style>
